<template>
    <div>
        <div class="bg"></div>
        <div style="height: 4vh"></div>
        <el-page-header style="margin-left: 6vw;" @back="goBack" content="改名页面"></el-page-header>
        <div style="display: flex;justify-content: center;">
            <el-card style="width: 80vw;margin-top: 4vh;">
                <el-row>
                    <span style="color: #8F2139">原昵称为：</span>
                    <el-tag type="warning">{{nickname}}</el-tag>
                </el-row>
                <!--      内容主体区域-->
                <el-form style="margin-top: 4vh" :model="userForm" :rules="rules" ref="userFormRef"  status-icon label-width="100px">
                    <el-form-item style="margin-left:16%;width: 64%" label="新昵称: " required prop="nickname">
                        <el-input v-model="userForm.nickname" placeholder="请输入想修改的昵称"></el-input>
                    </el-form-item>
                </el-form>
                <el-row style="margin-top: 10vh">
                    <el-col :span="4" :offset="5">
                        <el-button type="warning"  @click="EditName()">保 存</el-button>
                    </el-col>
                    <el-col :span="4" :offset="5">
                        <el-button type="warning" plain style="margin-left: 40px" @click="reset()">重 置</el-button>
                    </el-col>
                </el-row>
                <div style="height: 4vh"></div>
            </el-card>
        </div>
    </div>
</template>

<script>
    export default {
        name: "My",
        data(){
            return{
                userForm:{
                    nickname:'',
                    username:localStorage.getItem("username")
                },
                nickname:localStorage.getItem("nickname"),
                rules: {
                    nickname: [
                        { required: true, message: '请输入您想要修改的昵称', trigger: 'blur' },
                    ],
                }
            }
        },
        created() {

        },
        methods:{
            async EditName (){
                const { data: res } = await this.$http.post('/user/update/', this.userForm)
                if (res.code !== 200) {
                    return this.WarningMsg(res.msg)
                }
                console.log(res.data)
                this.$message.success('修改成功!')
                localStorage.setItem("nickname",res.data.nickname)
                this.$router.go(0)
            },
            reset(){
                this.$refs.userFormRef.resetFields()
            },
            goBack(){
                this.$router.go(-1)
            },
            WarningMsg(msg) {
                const h = this.$createElement;
                this.$notify.warning({
                    title: '提示',
                    message: h('p', {style: 'color: teal'}, msg),
                    offset: 100,
                    duration: 3000
                });
            },
        }
    }
</script>

<style scoped>
    .bg{
        background: url(../../assets/img/3.jpg);
        background-size: 100% 100%;
        height: 100%;
        opacity: 0.2;
        position: fixed;
        width: 100%;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }
    /deep/.el-form-item__label{
        color: #620a23;
        font-weight: bold;
    }
</style>
